@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");

body {
  font-family: Arial, sans-serif;
  background-color:#033067;
  color: white;
}





.port-button-container{
  padding: 0px 190px;
}
.breadcrumb-nav {
  padding: 10px 15px;
  margin-top: 5%;
  border-radius: 5px;
}

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  background-color: transparent;
}

.breadcrumb-item {
  margin-right: 5px; /* Smaller spacing between items */
  font-size: 14px; /* Slightly smaller font size for mobile */
}

.breadcrumb-item + .breadcrumb-item:before {
  content: ">";
  margin-right: 5px; 
  color: grey;
}

.breadcrumb-item a {
  text-decoration: none;
  color: white;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #6c757d;
}

/* Media query for mobile view */
@media (max-width: 576px) {
  
}



.logo-img {
  width: 50px;
  height: auto;
}

.img-fluid {
  max-width: 67%;
  margin-top: 10%;
  height: auto;
}
/* Submenu styling */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.submenu li {
  width: 200px;
}

.submenu a {
  padding: 10px;
  color: #000;
  white-space: nowrap;
}

/* Show submenu on hover */



/* Portfolio Section */
.portfolio-section {
  text-align: center;
  padding: 50px;
}

.filter-buttons {
  margin-bottom: 20px;
}

.filter-button {
  padding: 10px 20px;
  margin: 5px;
  background-color:transparent;
  color: #fff;
  border-color: white;
  cursor: pointer;
}

.filter-button:hover {
  color: #d8ff00;
  border-color: chartreuse;
}


/* Container styles */
.container h2 {
  color: #d8ff00;
}

.container h3 {
  color: #d8ff00;
  margin-left: 111px;
}

.container h6 {
  color: white;
}

.container p {
  color: white;
  text-align: start;
}

/* Contact Form Section */
.content-form {
  width: 100%;
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  color: #fff;
  text-align: center;
  font-family: Arial, sans-serif;
}

/* Portfolio grid layout */
.portfolio-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.portfolio-item img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

/* "Find Us" section */
#find-us h2 {
  color: #fff200;
  font-size: 24px;
  font-weight: bold;
}

.find-us-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.find-us-container {
  text-align: center;
  color: yellow;
  padding: 20px;
}

.find-us-container h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ffff00;
  /* Yellow color */
  margin-left: -73px;
}

/* Inquiry Button */
.inquiry-btn {
  background-color:#033067;
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.inquiry-btn:hover {
  background-color: #d80000;
}

/* Mobile menu icon */

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
}



/* Form Input Styles */
.strategy-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.strategy-form label {
  text-align: left;
  font-size: 14px;
  margin-bottom: -21px;
}
.strategy-form input {
  padding: 12px;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 16px;
  color: #000;
}

.strategy-form span {
  color: red;
}
.portfolio-section{
  color: #d8ff00;
}


/* Submit button */
.submit-button {
  background-color: #e60000;
  color: #fff;
  padding: 12px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: yellowgreen;
}
.contact-info{
  margin-left: 489px;
  margin-top: -100px;
  width: 40%;
  position: relative;
  left: 8%;
  top: -167px;
}

iframe{
  width: 24%;
  height: 255px;
}
.map-container{
  margin-left: -50%;
  margin-bottom: 30px;
}

 .contact-info p{
  color: white;
 }

 .portfolio-item{
 display: block;
}
.content-form h6{
  color: #d8ff00;
}









/* Media Queries for Mobile Responsiveness */
@media screen and (max-width: 768px) {
  
   .contact-info {
      margin-left: 20px;  /* Adjust based on how much margin you want on mobile */
      margin-top: 20px;
      width: 90%;         /* Make it take more width on smaller screens */
      left: 0;            /* Center the content */
      top: 0;             /* Adjust top positioning */
    }
    iframe {
      width: 90%;   /* Increase the width for mobile devices */
      height: 200px; /* Adjust height for smaller screens */
    }
     
    .breadcrumb-nav {
      padding: 8px 10px; /* Adjust padding for smaller screens */
    }
    .breadcrumb-item {
      font-size: 12px; /* Reduce font size for mobile */
    }
    .breadcrumb-item + .breadcrumb-item:before {
      margin-right: 4px; /* Reduce space before separator */
    }

  .inquiry-btn {
    display: none;
  }

 
  .map-container{
    margin-left: -2%;
    margin-bottom: 32px;
  }

  }
  


/* Fine-tuning for small-to-medium devices */
@media (min-width: 576px) and (max-width: 768px) {
  .portfolio img {
    margin-bottom: 15px;
  }

  .portfolio-section h2 {
    font-size: 2.5rem;
  }
}

/* Larger screen styles */
@media (min-width: 768px) {
  .portfolio img {
    margin-bottom: 10px;
  }
}

/* Larger padding for bigger screens */
@media (min-width: 992px) {
  section.portfolio-section {
    padding: 80px 0;
  }
}